<template>
	<view class="content">
		<view class="title">
			<input type="text" v-model="questionTitle" placeholder="输入问题" placeholder-style="color:#dcdcdc;font-size:30upx;font-weight:500"
			 maxlength="30" />
		</view>
		<view class="desc">
			<textarea show-confirm-bar="false" fixed="true" v-model="questionDesc" placeholder="问题描述" auto-height="true"
			 maxlength="500" />
			</view>
		
		<view class="img" v-if="imgUrl.length!=0">
			<view class="close"  @tap="deleteImg(index)">×</view>
			<image :src="imgUrl" mode="aspectFill"></image>
		</view>
		
		<view class="btn">
			<view class="left" @tap="chooseImg()">
				<image src="../../static/images/addimage.png" mode=""></image>
				<text>插入图片</text>
			</view>
			<text :class="btn" @tap="add">发布</text>
		</view>
	</view>
</template>

<script>
	import utils from "../../static/js/utils.js"
	import {
			mapState,
			mapMutations
		} from 'vuex';
	export default {
		data() {
			return {
				imgUrl:'',
				questionTitle:'',
				questionDesc:''
			}
		},
		computed:{
			...mapState(['user']),
			btn(){
				if(this.judge()){
					return "right";
				}
				return "right dis"
			}
		},
		methods: {
			deleteImg(){
				this.imgUrl='';
			},
			chooseImg(){
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						that.imgUrl = res.tempFilePaths[0];
					}
				});
			},
			judge(){
				if(this.questionTitle.length==0) {
					return false;
				}
				if(this.questionDesc.length==0) {
					return false;
				}
				return true;
			},
			add(){
				if(!this.judge()){
					return;
				}
				utils.loading("发布中");
				let data = {
						userId:this.user.id,
						questionTitle:this.questionTitle,
						questionDesc:this.questionDesc
					};
				if(this.imgUrl.length==0) {
					utils.post('question/add',data,function(data){
						uni.redirectTo({
							url: 'success?questionId='+data+"&type="+1
						});
					})
				}else{
					let token = uni.getStorageSync('token')||[];
					let pathurl = utils.baseUrl+"question/add";
					let that = this;
					//下面是上传到服务器的方法
					uni.uploadFile({
						url: pathurl,
						filePath: this.imgUrl,
						header: {
							token: token
						},
						formData:data,
						name: 'image',
						success: res => {
							res = res.data;
							res = JSON.parse(res);
							utils.hideLoading();
							if (res.code == 0) {
								uni.redirectTo({
									url: 'success?questionId='+res.data+"&type=1"
								});
						
							} else {
								utils.errorToast(res.errMsg);
							}
						},
						fail: err => {
							utils.errorToast("网络连接失败");
						},
						complete: () => {}
					});
				}
				
			}
		}
	}
</script>

<style>
	.content{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.title{
		width: 92%;
		height: 100upx;
		box-shadow: inset 0px -1px 1px -1px #dcdcdc;
	}
	.title input{
		font-size: 32upx;
		height: 100upx;
		font-weight: 600;
	}
	.img{
		position: relative;
		width: 92%;
		margin-top: 40upx;
		height: 300upx;
		margin-bottom: 130rpx;
	}
	.img image {
		width: 100%;
		max-height: 300upx;
	}
	.desc{
		width: 92%;
		max-height: 700upx;
		font-size: 28upx;
		margin-top: 30upx;
	}
	.desc textarea{
		width: 100%;
	}
	.close{
		position: absolute;
		top: 10upx;
		right: 10upx;
		height: 60upx;
		background-color:#000000;
		opacity:0.7;
		text-align:center;
		line-height:60rpx;
		border-radius:60rpx;
		width: 60upx;
		font-size: 40upx;
		color: #ffffff;
	}
	.btn {
		width: 92%;
		height: 110upx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		box-shadow: inset 0px 1px 1px -1px #dcdcdc;
	}
	.left{
		display: flex;
		height: 110upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.left image{
		height: 40upx;
		width: 40upx;
	}
	.left text {
		font-size: 26upx;
		color: #999999;
		margin-left: 10upx;
	}
	.right{
		font-size: 28upx;
		color: #FF4040;
	}
	.dis {
		color: #dcdcdc;
	}
</style>
